<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="assets/css/default.css" rel="stylesheet">
<link href="assets/css/openContent.css" rel="stylesheet">
<link href="assets/css/heejong.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jindo.desktop.all.js"></script>
<script type="text/javascript" src="assets/js/jindo_component.js"></script>
<script type="text/javascript" src="assets/js/jindo_mobile_component.js"></script>
<script type="text/javascript" src="assets/js/ajaxPasingdata.js"></script>

<title>네이버 UX::반응형 웹</title>
</head>
<body>
	<!--  --------------- main header 레이아웃 ---------------  -->
	<header class="main-header">
		<a class="home-link" href=""> 
			<img class="logo-img" alt="네이버 UX::반응형 웹" src="assets\img\logo.png">
		</a>
		<section class="search" id="search" action="http://search.naver.com/search.naver">
			<input class="search-text" type="text" id="query" placeholder="네이버 통합검색"> 
			<input class="search-submit" type="submit" onclick= "search('http://se.naver.com');" value="">
		</section>
		<ul class="content-navi">
			<li onclick="controller('home')">홈</li>
			<li onclick="controller('news')">뉴스</li>
			<li onclick="controller('dic')">사전</li>
			<li onclick="controller('me')">서비스</li>
			<li onclick="controller('beta')">유아교육</li>
		</ul>
	</header>
	<!--  --------------- main container 레이아웃 ---------------  -->
	<section class="main-container">
		<section id="mainContainer">
			<section class="tile-container">
				<ul class="tile-ct" id="homeContainer">
					<li><article >
						<img src="assets/img_icon/navermap.png" onclick="openContent('http://map.naver.com')">
					</article><span>지 도</span>
					</li>
					
					<li><article>
					<img src="assets/img_icon/email2.png" onclick="openContent('http://mail.naver.com')">
					</article><span>메 일</span></li>
					
					<li><article>
					<img src="assets/img_icon/contacts.png" onclick="openContent('http://contact.naver.com')">
					</article><span>주 소 록</span></li>
					
					<li><article>
					<img src="assets/img_icon/navercafe.png" onclick="openContent('http://cafe.naver.com')">
					</article><span>카 페</span></li>
					
					<li><article>
					<img src="assets/img_icon/blog.png" onclick="openContent('http://blog.naver.com')">
					</article><span>블 로 그</span></li>
					
					<li><article >
					<img src="assets/img_icon/me2day.png" onclick="openContent('http://me2day.net')">
					</article><span>미 투 데 이</span></li>
					
					<li><article>
					<img src="assets/img_icon/nndrive.png" onclick="openContent('http://ndrive.naver.com')">
					</article><span>N 드 라 이 브</span></li>
					
					<li><article>
					<img src="assets/img_icon/calendar.png" onclick="openContent('http://calendar.naver.com')">
					</article><span>캘 린 더</span></li>
					
					<li><article>
					<img src="assets/img_icon/photo.png">
					</article><span>포 토 앨 범</span></li>
					
					<li><article>
					<img src="assets/img_icon/megajump.png">
					</article><span>게 임</span></li>
					
					<li><article>
					<img src="assets/img_icon/line.png">
					</article><span>라 인</span></li>
					
					<li><article>
					<img src="assets/img_icon/music.png">
					</article><span>음 악</span></li>
				</ul>
				
				<!--  --------------- news Contents 레이아웃 ---------------  -->
				<ul class="tile-ct" id="newsContainer">
					<li>news</li>
				</ul>
				<ul class="tile-ct" id="dicContainer">
					<li>dic</li>
				</ul>
				<ul class="tile-ct" id="meContainer">
					<li>me</li>
				</ul>
				<ul class="tile-ct" id="betaContainer">
					<li>beta</li>
				</ul>
			</section>
		</section>
	</section>
	
	<!--  --------------- sub container 레이아웃 ---------------  -->
	<section class="sub-container">
		<section id="subContainer">
			<section class="content-container">
				<ul class="content-ct" id="homeSub">
		<!--**************로그인**************-->			
				<div style="width: 250px; height: 120px; border: 1px solid #ccc; background-color:#323641; margin: 20px auto;">	
					<table style="margin: 30px auto;">
						<tr>
							<td><input type="text" name="id" placeholder="아이디" style="width: 150px; height:20px;"></td>
							<td rowspan="2"><input id="login_buttom" type="image" src="http://static.nid.naver.com/loginv3/img/btn_login_m.png" style="height: 54px; padding-left:5px;"></td>
						</tr>
						<tr>
							<td><input type="password" name="pw" placeholder="패스워드" style="width: 150px; height:20px;"></td>
						</tr>
					</table>
				</div>
		<!--**************로그인******************-->	
		<!--**************실시간 검색어 **************-->
				<div id="tabcontrol" class="tabcontrol">
						<ul class="tabs">
							<li class="tc-tab tc-selected">실시간 검색어</li>
							<li class="tc-tab">핫토픽</li>
							<li class="tc-tab">FunUp키워드</li>
						</ul>
						<div class="panels">
							 <div class="tc-panel tc-selected">
								<ul id="container_first">
								</ul>
							</div>
							<div class="tc-panel">
								<ul id="container_second">
								</ul>
							</div>
							<div class="tc-panel">
								<ul id="container_third">
								</ul>
							</div> 
						</div>
					</div>  
					
		<!--**************실시간 검색어 ************-->
		
		
				</ul>
<!--*************************************** 뉴스*************************************************-->
				<ul class="content-ct" id="newsSub">
					<li>news</li>
					<button onClick="ossRolling.moveBy(-4); return false;">◀</button>
					<button onClick="ossRolling.moveTo(4); return false;">▶</button>
		<!--**************전체 뉴스 데이터**************-->	
					 <div id="tabcontrols" class="tabcontrol">
						<ul class="tabs02" id="tip">
							<li class="tc-tab tc-selected">정치</li>
							<li class="tc-tab">경제</li>
							<li class="tc-tab">사회</li>
							<li class="tc-tab">생활/문화</li>
							<li class="tc-tab">세계</li>
							<li class="tc-tab">IT/과학</li>
							<li class="tc-tab">연예</li>
							<li class="tc-tab">스포츠</li>
						</ul>
					 	<div class="panels02">
							<div class="tc-panel tc-selected" id="police">
							</div>
							<div class="tc-panel" id="economy">
							</div>
							<div class="tc-panel" id="social">
							</div> 
							<div class="tc-panel" id="culture">
							</div> 
							<div class="tc-panel" id="world">
							</div> 
							<div class="tc-panel" id="it">
							</div> 
							<div class="tc-panel" id="entertain">
							</div> 
							<div class="tc-panel" id="sports">
							</div>
						</div>
					</div> 
				
					
		<!--**************전체 뉴스 데이터**************-->		
		<!--**************날씨예보**************-->
					<div id="rolling" class="rolling" style="margin:10px auto;">
						<ul id="alldata">
						</ul>
					</div>
					<button onClick="checkLeft();">◀</button>
					<button onClick="checkRight();">▶</button>
					
		<!--**************날씨예보**************-->
					
				</ul>
				<ul class="content-ct" id="dicSub">
					<li>dic</li>
<!--***************************************백과사전*************************************************-->		
				<div class="diction">
					<div id="dic_positon">
						<h2>어학사전</h2>
						<table>
							<tr>
								<td><input id="input_dic" type="text" placeholder="입력하세요"> </td>
								<td><input id="img_dic" type="image" src="http://dicimg.naver.com/dic-home-service/style/201306051741/img/btn_search.gif" ></td>
							</tr>	
						</table>
					</div>
				</div>



				<div class="diction">
					<div id="dic_positon">
						<h2>백과사전</h2>
						<table>
							<tr>
								<td><input id="input_dic02" type="text" placeholder="입력하세요"> </td>
								<td><input id="img_dic02" type="image" src="http://dicimg.naver.com/dic-home-service/style/201306051741/img/btn_search.gif" ></td>
							</tr>	
						</table>
					</div>
				</div>			
					
<!--***************************************백과사전**************************************************-->
<!--***************************************보여주기식 *************************************************-->	
				<div id="ad_data">
					<ul>
						<li><img src="http://dicimg.naver.com/dic-home-service/style/201306041813/img/banner17.jpg"></li>
						<li><img src="http://dicimg.naver.com/dic-home-service/style/201306041813/img/banner12.jpg"></li>
						<li><img src="http://dicimg.naver.com/dic-home-service/style/201306041813/img/banner07.jpg"></li>
					</ul>
				</div>
				<button onclick="osssRolling.moveBy(1);"><</button>
				<button onclick="osssRolling.moveBy(-1);">></button>

<!--***************************************보여주기식 *************************************************-->											
					
				</ul>
				<ul class="content-ct" id="meSub">
					<li>me</li>
				</ul>
				<ul class="content-ct" id="betaSub">
					<li>beta</li>
				</ul>
			</section>
		</section>
	</section>
<!--  --------------- java script 시작[히종]----------------  -->	
	<script type="text/javascript">
	ajaxUpdate('pasingData/realtime.json');
	ajaxUpdate('pasingData/weather.data');
	allNews();
	function allNews(){
		ajaxUpdate('pasingData/police.data');
	 	ajaxUpdate('pasingData/economy.data');
		ajaxUpdate('pasingData/social.data');
		ajaxUpdate('pasingData/culture.data');
		ajaxUpdate('pasingData/world.data');
		ajaxUpdate('pasingData/it.data');
		ajaxUpdate('pasingData/entertain.data');
		ajaxUpdate('pasingData/sports.data');
	}		
	
	//total_dic
	jindo.$Element("img_dic").attach("click",diction); //어학사전
	jindo.$Element("img_dic02").attach("click",wikiDiction); //백과사전
	function diction(){
		openContent("http://dic.naver.com/search.nhn?dicQuery="+jindo.$Element("input_dic").text()+"&query="+jindo.$Element("input_dic").text());
	}
	function wikiDiction(){
		openContent("http://terms.naver.com/search.nhn?query="+jindo.$Element("input_dic02").text());
	}
		
		//tab-controller
		var oTab = new jindo.TabControl(jindo.$('tabcontrol'));
		var ossTab = new jindo.TabControl(jindo.$('tabcontrols'), { 
		    sClassPrefix : "tc-", // (String) 클래스명 앞에 붙게되는 prefix 선언
		    sCheckEvent : "mouseover", //탭에 적용될 이벤트 ("mouseover", "mousedown", "click")
		    bActivateOnload : true //로드시 컴포넌트 활성화여부
		});
		

		//Rolling-controller
		//[tab-controller롤링]
		var ossRolling = new jindo.Rolling(jindo.$('tabcontrols'), {
		    nDuration : 400, //롤링 시간은 400ms 으로 설정
		    sDirection : 'horizontal', //가로형으로 설정
		    fEffect : jindo.Effect.cubicEase //
		});
		//[사전광고 롤링]
		var osssRolling = new jindo.Rolling(jindo.$('ad_data'), {
		    nDuration : 400, //롤링 시간은 400ms 으로 설정
		    sDirection : 'vertical', //가로형으로 설정
		    fEffect : jindo.Effect.cubicEase //
		});
		//[날씨 롤링]
		var oRolling = new jindo.Rolling(jindo.$('rolling'), {
			nFPS : 0, 
			nDuration : 0, //롤링 시간은 400ms 으로 설정
			sDirection : 'horizontal', //가로형으로 설정
			fEffect : jindo.Effect.cubicEase
		});
		function checkLeft(){
			if(oRolling.moveBy(-1)!=true){
				oRolling.moveLastTo(0);
			}
		}
		function checkRight(){
			if(oRolling.moveBy(1)!=true){
				oRolling.moveTo(0);
			}
		}
	</script>
<!--  --------------- java script 시작[히종]----------------  -->		
	
	
	
	
	
	
	
	<!--  --------------- java script 시작----------------  -->
	<script type="text/javascript" src="assets/js/openContent.js"></script>
	<script type="text/javascript">
	
		var mainFlicking = new jindo.m.Flicking('mainContainer', {
			bHorizontal : true, //가로형 여부
			sClassPrefix : 'tile-', //Class의 prefix
			nDefaultIndex : 0, //로드시에 화면에 보이는 콘텐츠의 인덱스
			bAutoResize : true, //화면 사이즈 조정 여부 
			bUseCircular : false, //순환여부 
			sAnimation : "slide" //플리킹 애니메이션 타입  "slide", "cover" 사용가능
		}).attach({
			'afterFlicking' : function(sss) {
			}
		});
		var subFlicking = new jindo.m.Flicking('subContainer', {
			bHorizontal : true, //가로형 여부
			sClassPrefix : 'content-', //Class의 prefix
			nDefaultIndex : 0, //로드시에 화면에 보이는 콘텐츠의 인덱스
			bAutoResize : true, //화면 사이즈 조정 여부 
			bUseCircular : false, //순환여부 
			sAnimation : "slide" //플리킹 애니메이션 타입  "slide", "cover" 사용가능
		}).attach({
			'afterFlicking' : function(sss) {
			}
		});
	</script>
	
</body>
</html>